<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.10.1.min.js"></script>
    <style>
        li {
            margin: 5px 0;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div id="box" class="par" lang="zh-cn">
        <h3>Box</h3>
        <ul class="wrap">
            <li class="first">1</li>
            <h2>test</h2>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
            <li><span><i>123123123</i></span></li>
        </ul>
    </div>
    <!-- <div id="box" class="par" lang="zh-cn">
        <h3>Box</h3>
        <ul class="wrap">
            <li class="">1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div> -->
</body>
<script>
    // next()  匹配元素的下一个同级元素
    $(".first").next()

    // nextAll()  匹配元素之后的所有同级元素
    $(".first").next()

    // prev()  匹配元素的上一个同级元素
    $(".last").prev()

    // prevAll()  匹配元素之后的所有同级元素
    $(".last").prev()

    // end  回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。  (返回上一级)
    // $("#box").find(".first").css("background", "orange").end()

    // $("#box").find(".first").siblings().css("color", "red").end().css("color", "blue")

    $("#box").find(".first").siblings().css("color", "red");
    $("#box").find(".first").css("color", "blue");
</script>

</html>